<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        html,
        body {
          position: relative;
          height: 100%;
        }
    
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }
    
        .swiper {
          width: 100%;
          height: 100%;
        }
    
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .swiper-pagination-bullet {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-size: 15px;
          color: #000;
          opacity: 1;
          background: rgba(0, 0, 0, 0.2);
        }
    
        .swiper-pagination-bullet-active {
          color: #fff;
          background: darkred;
        }
      </style>
</head>
<body>
    <!-- 导航 -->
  <div class="dianjiaoshi"></div>
  <nav>
        <div class="logo">
            <h1>marketing</h1>
        </div>
        <div class="list">
            <ul>
                <li><a href="#">HOME</a></li>
                <li>
                  <a href="#" >FEATURES
                    <span>▶</span>
                  </a>
                  <div class="plus1">
                  </div>
                </li>
                <li><a href="#">SERVICES</a></li>
                <li>
                  <a href="#">BLOG<span>▶</span></a>
                  <div class="plus2"></div>
                </li>
                <li>
                  <a href="#">POTEFLIO<span>▶</span></a>
                  <div class="plus3"></div>
                </li>
                <li>
                  <a href="#">PAGES<span>▶</span></a>
                  <div class="plus4"></div>
                </li>
                <li><a href="#">CONTACTS</a></li>
            </ul>
        </div>
        <div class="search" onclick="putsearch()"></div>
        <input type="text" id="navinput">
  </nav>
     <!-- 轮播图 -->
  <div class="banner">
         <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/slider-minimal-slide-2-1920x888.jpg" />
              <div class="content">SOLUTIONS MADE EASY</div>
            </div>
            <div class="swiper-slide">
              <img src="./images/slider-minimal-slide-3-1920x888.jpg" />
              <div class="content">THE BEST IN THE MARKET</div>
            </div>
            <div class="swiper-slide">
              <img src="./images/slider-minimal-slide-1-1920x888.jpg" />
              <div class="content">DEDICATED TO RESULTS</div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          </div>
  </div>
  <!-- OUR SERVICE -->
  <div class="service">
    <div class="title">
      <h2>Our Service</h2>
      <p id="idp1">We provide a variety of marketing and promotion service to enable you and your business <br> with innovative tools and stratrgies and attract more customers
      </p>
    </div>
    <div class="content">
      <div class="show" id="idshow"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
      <div class="show"><img src="./images/smallimg/image.png" alt=""><h3>Branding</h3><p>Whether you're looking to launch a brand or you just need help clarifying your message, we can help you</p></div>
    </div>
  </div>
    <div class="about">
     <div class="text" id="idtext1"><h3>A Few Words About Us</h3>
    <p>We are a team of talented marketers who happen to love creating smart ideas for those who will have us. We use our creative potential to provide the smartest ideas.</p>
    <p>We have a wide range of experience, expertise and tools to create and implement your campagins, from carefully curating awesome content to optimising it with our great SEO powers as well as outdoor marketing skills</p>
    <button>LEARN MORE</button>
    </div>
    <img id="aboutimg" src="./images\large-features-2-570x368.jpg" alt="">
  </div>
  <!-- 棕色区域 -->
  <div class="middle1">
    <div class="text"><h3>Learn the Cost of your <strong>Marketing Campaign </strong>Right Now!</h3></div>
    <button>VIEW ALL PRICING</button>
  </div>
  <!-- 我们仨 -->
  <div class="teammember">
    <div class="title" id="teammembertitle">Who We Are</div>
    <div class="pic">
      <img src="./images/team-2-370x368.jpg" alt="">
      <img src="./images/team-3-370x368.jpg" alt="">
      <img src="./images/team-1-370x368.jpg" alt="">
    </div>
    <button id="teambutton">VIEW ALL TEAM</button>
  </div>
  <!-- 其他人的评论 -->
  <div class="Testimonials">
    <div class="title">Testimonials</div>
    <div class="content">
      <div class="text" id="Ttext">
        <h2>"</h2>
        <p>Marketing Agency is, hands down, one of the best companies that we have worked with! The company has either met or exceeded all of the goals that we initially set for all of the projects that they complemented for us. i am sur that our company will partner with them again in the future.</p>
        <div class="introduce">
          <img src=images\testimonials-person-3-96x96.jpg alt="">
          <div class="words">
            <h4>Albert Webb</h4>
            <p>CEO at Majestic</p>
          </div>
        </div>
        <div class="dot">
          <button></button>
          <button></button>
          <button></button>
        </div>
      </div>
      <div class="play">
        <div class="mask">
          <img src="./images/video-play.png" alt="">
          <p>Lawrence Alvarado</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 价格区域 -->
  <div class="Price">
    <div class="title" id="pricetitle">Pricing</div>
    <p id="pricep">In this section you can learn more about avaliable pricing plans and included services. Even if you wown a small business and don't need a great marketing campaign, we have what to offer.  
    </p>
    <div class="pricelist" id="pricelist">
      <div class="pricearea">
        <img src="./images/smallimg/sun.png" alt="">
        <h3>Small Business</h3>
        <div class="text">
          <p>60 Campaign Hours</p>
          <p>1 Month</p>
          <p>10 Additional Services</p>
        </div>
        <h2>$789.00</h2>
        <button>ORDER SERVICE</button>
      </div>
      <div class="pricearea">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <h3>Small Business</h3>
        <div class="text">
          <p>60 Campaign Hours</p>
          <p>1 Month</p>
          <p>10 Additional Services</p>
        </div>
        <h2>$789.00</h2>
        <button>ORDER SERVICE</button>
      </div>
      <div class="pricearea">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <h3>Small Business</h3>
        <div class="text">
          <p>60 Campaign Hours</p>
          <p>1 Month</p>
          <p>10 Additional Services</p>
        </div>
        <h2>$789.00</h2>
        <button>ORDER SERVICE</button>
      </div>
      <div class="pricearea">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <img src="./images/smallimg/sun.png" alt="">
        <h3>Small Business</h3>
        <div class="text">
          <p>60 Campaign Hours</p>
          <p>1 Month</p>
          <p>10 Additional Services</p>
        </div>
        <h2>$789.00</h2>
        <button>ORDER SERVICE</button>
      </div>
    </div>
  </div>
  <!-- 中间棕色第二部分 -->
  <div class="middle2">
    <div class="text"><h3>We Offer Quality  <strong>Branding and Promotion </strong> </h3></div>
    <button>FREE CONSULTATION</button>
  </div>
  <!-- 最新博客 -->
  <div class="blog">
    <div class="title" id="blogtitle">Latest Blog Posts</div>
    <div class="show">
      <div class="Info" id="Info1"><img src="./images/grid-blog-1-571x353.jpg" alt="">
      <h2>10 Digital Marketing Mistakes to Avoid</h2>
      <h3>by Theresa Barnes <span>Apr 21,2022 at 12:05pm</span><strong>News</strong></h3>
      <p>Though managing your digital marketing campagin may seem easy, you can encounter some complexities, which usually lead to mistakes and a bad promotion effect.</p>
      </div>

      <div class="Info" id="Info2"><img src="./images/grid-blog-2-571x353.jpg" alt="">
      <h2>Where Marketers Need to Succeed This Season</h2>
      <h3>by Theresa Barnes  <span>Apr 21,2022 at 12:05pm</span><strong>News</strong></h3>
      <p>Being a successful marketer today might appear to require a never-ending list of skills. Where do you need to excel -- content creation, social media, or all of the above?</p>
      </div>
    </div>
    <button id="blogbutton">VIEW ALL BLOG POSTS</button>
  </div>
  <div class="newsletter">
    <div class="title"><p>Newsletter</p></div>
    <div class="text">Keep up with our always uocoming news and updatas. Enter your e-mail and subscribe to our newsletter.
    </div>
    <div class="Input"><input type="text" placeholder="Your e-mail"><button>SUBSCRIBE</button>
    </div>
    <div class="imgarea">
      <div class="imgbox imgbox1">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
      <div class="imgbox imgbox2">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
      <div class="imgbox imgbox3">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
      <div class="imgbox imgbox4">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
      <div class="imgbox imgbox5">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
      <div class="imgbox imgbox6">
        <a href="#">
        <div class="mask">
          <p>+</p>
        </div>
        </a>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="bigbox">
      <div class="QuickLinks">
        <h3>Qucik Links</h3>
        <div class="list">
          <ul>
            <li>Services </li>
            <li>Single </li>
            <li>Contacts </li>
            <li>Testimonials </li>
            <li>Terms of Use</li>
          </ul>
          <ul>
            <li>Blog </li>
            <li>About Us </li>
            <li>About Me </li>
            <li>Single Project </li>
            <li>Single Job </li>
          </ul>
          <ul>
            <li>Careers </li>
            <li>Portfolio </li>
            <li>Single Project </li>
            <li>Our History </li>
            <li>Single Job</li>
          </ul>
          <ul>
            <li>Facebook </li>
            <li>Twitter </li>
            <li>Instagram </li>
            <li>Linkedin </li>
            <li>Pinterest </li>
          </ul>
        </div>
      </div>
      <div class="ConInfo">
        <h3>Contact Information</h3>
        <div class="list">
          <ul>
            <li>
              <img src="./images/smallimg/position.png" alt="">
              <p>2130 Fulton Street San Diego, CA <br> 94117 1980 USA
              </p>
            </li>
            <li>
              <img src="./images/smallimg/phone.png" alt="">
              <p>1-800-1234-678 <br> 1-800-8765-098</p>
            </li>
            <li>
              <img src="./images/smallimg/letter.png" alt="">
              <p>ingo@demolink.org</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="finalmask">
      <p>© 2024 All Rights Reserved. Terms of Use and Privacy Policy 网站模板</p>
      <button onclick="rolltotop()">↑</button>
    </div>
  </div>
</body>
  <!-- Swiper JS -->
  <script src="JS/swiper-bundle.min.js"></script>
  <script src="./JS/index.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      effect: "fade",
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' +"0"+(index + 1) + "</span>";
        },
      },
    });
  </script>
</html>